<template>
  <ul>
    <el-form ref="ruleForm" :rules="finalRule" :model="form">
      <li v-for="item in config" :key="item.key">
        <el-form-item :prop="item.key">
          <el-input v-model="form[item.key]" :placeholder="item.placeholder" :type="item.type || 'text'">
            <i slot="prefix" :class="item.icon"></i>
          </el-input>
        </el-form-item>
        <div v-if="item.type === 'verifyCode'" class="v-code">
          <verify-code
            width="120"
            height="50"
            @checkFn="handleVerifyCode"
          ></verify-code>
        </div>
      </li>
      <li key="verifyCode" v-if="needVerifyCode">
        <el-form-item prop="verifyCode">
          <el-input v-model="form.verifyCode" placeholder="验证码">
            <i slot="prefix" class="iconfont icon-code"></i>
          </el-input>
        </el-form-item>
        <div class="v-code">
          <verify-code
            width="120"
            height="50"
            @checkFn="handleVerifyCode"
          ></verify-code>
        </div>
      </li>
    </el-form>
  </ul>
</template>
<script>
import VerifyCode from '../verify-code/index.vue'
export default {
  name: 'login-form',
  components: {
    VerifyCode
  },
  props: {
    config: {
      isRequired: true
    },
    rules: {
      isRequired: false
    },
    form: {
      isRequired: false
    },
    needVerifyCode: {
      isRequired: false
    }
  },
  data () {
    var validateCode = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入验证码'))
      } else {
        if (value !== this.vCode) {
          callback(new Error('请输入正确的验证码'))
        }
        callback()
      }
    }
    return {
      verifyCodeRule: [{ validator: validateCode, trigger: 'blur' }],
      vCode: ''
    }
  },
  computed: {
    finalRule () {
      let obj = {}
      if (this.needVerifyCode) {
        obj = { ...(this.rules || {}), verifyCode: this.verifyCodeRule }
      }
      return obj
    }
  },
  methods: {
    validate (cb) {
      const that = this
      let flag = false
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // 校验通过
          cb(flag, that.form)
        } else {
          flag = true
          cb(flag)
          return false
        }
      })
    },
    handleVerifyCode (vc) {
      this.vCode = vc
    },
    realRef () {
      return this.$refs.ruleForm
    }
  }
}
</script>
<style scoped>
ul {
  width: 300px;
  margin: 50px auto 15px!important;
}
li {
  background: hsla(0, 0%, 71%, 0.1);
  border: 1px solid #c8c8c8;
  border-bottom: none;
  height: 50px;
  vertical-align: middle;
  position: relative;
}
li:last-child {
  border-bottom: 1px solid #c8c8c8;
}
li > .el-form-item /deep/ input {
  display: inline-block;
  font-size: 14px;
  background: none;
  outline: none;
  border: none;
  line-height: 50px;
  padding-left: 40px;
}
li > .el-form-item /deep/ .el-form-item__content {
  line-height: 50px;
}
li > .el-form-item /deep/ .el-input__prefix {
  left: 10px;
}
li > .el-form-item /deep/ .el-form-item__error {
  bottom: 3px; left: 40px;
}
li > .el-form-item .iconfont {
  font-size: 20px;
  color: #969696;
}
.v-code {
  position: absolute;
  width: 120px;
  height: 50px;
  right: 0;
  top: 0;
}
</style>
